<template>
    <div>
        <dl
            :style="{ visibility: steps.length > 0 ? 'visible' : 'hidden' }"
            class="step"
        >
            <template v-for="(item, index) in steps">
                <dt
                    :key="index"
                    :class="{ active: index <= currentIndex }"
                >
                    <span>{{ index + 1 }}</span>
                    <p>{{ item }}</p>
                </dt>
                <dd
                    v-if="index < steps.length - 1"
                    :key="'dd' + index"
                    :class="{ active: index < currentIndex }"
                ></dd>
            </template>
        </dl>
    </div>
</template>

<script>
/**
 * 顶部步骤
 */
export default {
    name: 'HeadStep',
    props: {
        // 当前聚焦的下标值（优先级比currentLabel高）
        currentIndex: { type: Number, default: -1 },
        // 内容数组
        steps: {
            // type: Number, default() {
            //     return 0;
            // }
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {};
    },
    computed: {},
    methods: {},
};
</script>

<style scoped>
.step {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}
.step > dt {
    height: 32px;
    /* border: solid thin #F6F6F6; */
    border-radius: 50%;
    color: #fff;
    /* background-color: #2985ff; */
    box-sizing: border-box;
}
.step > dt span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: solid 2px #fff;
    border-radius: 50%;
    margin: 0 auto;
    color: #a1a1a1;
    /* background-color: #1e7fff; */
    background-color: #f6f6f6;
    box-sizing: border-box;
}
.step > dt p {
    line-height: 2em;
}
.step > dt.active span {
    color: #fff;
    /* border: solid thin #91bbff; */
    border: solid 2px #f6f6f6;
    background-color: #1e7fff;
}
.step > dd {
    flex: 1;
    height: 0;
    margin: 0 2px;
    border: solid thin #f6f6f6;
    border-radius: 1px;
}
.step > dd.active {
    /* border-color: #1e7fff55; */
}
</style>
